"use client"
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message, Tabs } from 'antd';
import Modal from './Modal'
import dayjs from 'dayjs'

import { getLeaveWordList, delLeaveWord } from '@/api/conversationApi'
import { updUser } from '@/api/usersApi'
export default function Home() {
  const [data, setData] = useState([]);

  const Init = async () => {
    const res = await getLeaveWordList()
    if (res?.flag) { setData(res.data) }
  }
  useEffect(() => {
    Init()
  }, [])
  // 清空会话
  const confirm = async (_id: string) => {
    await delLeaveWord({ _id })
    Init()
  };

  const columns = [
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '留言时间',
      dataIndex: 'time',
      key: 'time',
      render: (_: any) => dayjs(_).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: { newMessage: boolean; _id: string; state: number; }) => (
        <Space size="middle">
          <Popconfirm
            title="是否删除该留言?"
            onConfirm={() => confirm(record._id)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>删除留言</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Table columns={columns} dataSource={data} rowKey={(record: any) => record._id} />
    </>
  );
};
